<template>
  <div id="app">
    <div class="container">

    <div class="summary-cards">
        <div class="card overdue-30-days" @click="getSbList(2)">
          <p>今日未开始</p>
          <h2>{{planCounts[1].num}}</h2>
        </div>
        <div class="card in-progress-count" @click="getSbList(3)">
          <p>今日已过期</p>
          <h2>{{planCounts[2].num}}</h2>
        </div>
        <div class="card planned-count" @click="getSbList(1)">
          <p>今日已完成</p>
          <h2>{{planCounts[0].num}}</h2>
        </div>

    </div>

      <div class="filter-section" >
        时间范围:<input type="date" v-model="formDataOn.startDate" placeholder="开始日期" />
        <span>至</span>
        <input type="date" v-model="formDataOn.endDate" placeholder="结束日期" />
        点检区域:<select v-model="formDataOn.areaId">
          <option value="" disabled>请选择点检区域</option>
          <option v-for="option in options" :key="option.areaId" :value="option.areaId">
            {{ option.areaName }}
          </option>
        </select>

        设备名称:<select v-model="formDataOn.equipmentType">
          <option value="" disabled>请选择设备名称</option>
          <option v-for="option in etList" :key="option.equipmentType" :value="option.equipmentType">
            {{ option.equipmentType }}
          </option>
        </select>
      </div>
      <div class="filter-section">

        检查项:<select v-model="formDataOn.checkItem">
          <option value="" disabled>请选择检查项</option>
          <option v-for="option in ciList" :key="option.checkItem" :value="option.checkItem">
            {{ option.checkItem }}
          </option>
        </select>
        <!-- 设定值:<input style="width: 160px;" type="text" v-model="formDataOn.setValue" placeholder="设定值" />
        检查时间:<input type="text" v-model="formDataOn.time" placeholder="检查时间" /> -->

          <button @click="getSbList()">搜索</button>
          <button @click="handleExport">导出</button>
          <button @click="resetFilters">重置</button>
        </div>
      <!-- <p class="note">
        注：已根据点检计划进行统计，点击
        <span class="blue-number">蓝色数字</span>
        可查看详情
      </p>   -->

      <table v-if="showSb">
        <thead>
          <tr>
            <th>#</th>
            <th>任务ID</th>
            <th>点检日期</th>
            <th>检查时间</th>
            <!-- <th v-if="formDataOn.checkStatus=='已完成'">完成时间</th> -->
            <th style="width: 150px;" v-if="formDataOn.checkStatus=='已完成'">完成时间</th>
            <th style="width: 150px;" v-if="formDataOn.checkStatus=='已过期'">过期时间</th>
            <th>点检区域</th>
            <th>设备名称</th>
            <th>检查项</th>
            <th>设定值</th>
            <th>操作</th>
            <!-- <th>班次</th> -->
            <!-- <th>检查状态</th> -->
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row, index) in tableData" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ row.taskId }}</td>
            <td>{{ row.startDate }}</td>
            <td>{{ row.time }}</td>
            <td  v-if="formDataOn.checkStatus=='已完成'">{{ row.completeTime }}</td>
            <td  v-if="formDataOn.checkStatus=='已过期'">{{ row.completeTime }}</td>
            <!-- <td v-if="row.completeTime==null">暂未完成</td>
            <td v-else>{{ row.completeTime }}</td> -->
            <td>{{ row.areaName }}</td>
            <td>{{ row.equipmentType }}</td>
            <td>{{ row.checkItem }}</td>
            <td>{{ row.setValue }}</td>
            <td>
                  <el-button type="text" @click="viewDetails(row)" >查看详情</el-button>  
            </td>
            <!-- <td>{{ row.name }}</td> -->
            <!-- <td>{{ row.checkStatus }}</td> -->
          </tr>
        </tbody>
      </table>

    </div>

  <div class="filter-section" v-if="false">
        <!-- <input type="date" v-model="startDate" placeholder="开始日期" />
        <span>至</span>
        <input type="date" v-model="endDate" placeholder="结束日期" />   -->
        <select v-model="formDataOn.areaId">
          <option value="" disabled>请选择点检计划</option>
          <option v-for="option in options" :key="option.areaId" :value="option.areaId">
            {{ option.areaName }}
          </option>
        </select>
        <input type="text" v-model="formDataOn.equipmentName" placeholder="设备名称" />
        <input type="text" v-model="formDataOn.equipmentType" placeholder="设备类型" />
        <input type="text" v-model="formDataOn.checkPoint" placeholder="检查点" />
        <input type="text" v-model="formDataOn.checkItem" placeholder="检查项" />
        <input type="text" v-model="formDataOn.setValue" placeholder="设定值" />
        <button @click="getList()">搜索</button>
        <button @click="resetFilters">重置</button>
      </div>

      <!-- <p class="note">
        注：已根据点检计划进行统计，点击
        <span class="blue-number">蓝色数字</span>
        可查看详情
      </p>   -->

        <!-- 查看详情弹窗 -->  
    <el-dialog :visible.sync="detailDialogVisible" title="点检详情" width="60%">  
      <div class="details-container">
        <!-- 工单详情 -->  
        <section class="details-section">
          <div class="row">  
            <div class="item"><b>任务ID：</b>{{ selectedRow.taskId }}</div>  
            <div class="item"><b>点检日期：</b>{{ selectedRow.startDate }}</div>  

          </div>  
          <div class="row"> 
            <div class="item"><b>检查时间：</b>{{ selectedRow.time }}</div>  
            <div class="item"><b>点检区域：</b>{{ selectedRow.areaName }}</div>
          </div>  
          <div class="row">   
            <div class="item"><b>设备名称：</b>{{ selectedRow.equipmentType }}</div>  
            <div class="item"><b>图片：</b>{{ selectedRow.filePath }}
            <el-button type="text" @click="downloadFile(selectedRow)" >下载</el-button>  
            </div>  
          </div>  
          <div class="row">  
            <div class="item"><b>检查项：</b>{{ selectedRow.checkItem }}</div>  
            <div class="item"><b>设定值：</b>{{ selectedRow.setValue }}</div>  
          </div>  
        </section>  

        <!-- 流转信息 -->  
        <!-- <section class="details-section">  
          <h4>流转信息</h4>  
          <el-table :data="motionInfo" border stripe>  
            <el-table-column prop="operator" label="操作人" align="center"></el-table-column>  
            <el-table-column prop="action" label="操作内容" align="center"></el-table-column>  
            <el-table-column prop="time" label="操作时间" align="center"></el-table-column>  
            <el-table-column prop="status" label="保修单状态" align="center"></el-table-column>  
          </el-table>  
        </section>   -->
      </div>  
      <span slot="footer" class="dialog-footer">  
        <el-button @click="detailDialogVisible = false">关闭</el-button>  
      </span>  
    </el-dialog>    


          <pagination
          v-if="showSb"
          :total="totalOn"
          :page.sync="pageNum"
          :limit.sync="pageSize"
          @pagination="getSbList"
        />




  </div>
</template>

<script>
import {listStatic,listArea,listPcount,selectEtList,selectCiList} from "@/api/wushui/inspection";
import { status } from "nprogress";
import { download } from "@/utils/request";
export default {
  data() {
    return {
        motionInfo:[],
      detailDialogVisible: false,  
      selectedRow: {},  
       etList:[],
       ciList:[],
       formDataOn:{
        pageNum:'',
        pageSize:'',
        areaId:'',
        equipmentName:'',
        equipmentType:'',
        checkPoint:'',
        checkItem:'',
        setValue:'',
        name:'',
        time:'',
        startDate:'',
        endDate:'',
        checkStatus:'已完成',
      },
      planStatus:'',
      planCounts:[],
      pageNum: 1,
      pageSize: 10,
      totalOn:0,
      showSb:true,
      tabs: [
        { id: 1, name: "点检计划完成情况" },
        { id: 2, name: "点检人完成情况" },
        { id: 3, name: "点检设备完成情况" },
      ],
      activeTab: 1,
      selectedOption: "",
      options: [
        { id: 1, name: "计划 A", value: "planA" },
        { id: 2, name: "计划 B", value: "planB" },
      ],
      tableData: [

      ],
      tableDataRy: [

      ],
    };
  },
  created(){
    this.getSbList(2);
    this.getAreaList();
    this.getCiList();
    this.getEtList();
    this.getPcount();
  },
  methods: {



    //下载相关
    downloadFile(selectedRow) {
      // 获取服务器上的文件路径
    const filePath = encodeURIComponent(selectedRow.filePath); // 确保路径是 URL 安全的
    const posturl = '/plan/schedule/downScFile';
    const params = { filePath: selectedRow.filePath };
      download(posturl, params, filePath).then(() => {
        console.log('下载成功');
      }).catch(error => {
        console.error('下载失败', error);
      });

    },


    viewDetails(row) {  
      this.selectedRow = row;  
      this.detailDialogVisible = true;  
    },  

      /** 导出按钮操作 */
    handleExport() {
      this.download('plan/schedule/export', {
        ...this.formDataOn
      }, `role_${new Date().getTime()}.xlsx`)
    },
    resetFilters() {
      this.startDate = "";
      this.endDate = "";
      this.selectedOption = "";
      this.planStatus=this.formDataOn.checkStatus;
      this.formDataOn={
          pageNum: 1,
          pageSize: 10,
          areaId:'',
          equipmentName:'',
          equipmentType:'',
          checkPoint:'',
          checkItem:'',
          setValue:'',
          name:'',
          time:'',
          startDate:'',
          endDate:'',
      }
      this.formDataOn.checkStatus=this.planStatus;
    },
    getAreaList(){
      listArea().then((response) => {
          this.options=response;
        }).catch(() => {
          this.$message.error("获取数据失败");
        });
    },
    getEtList(){
      selectEtList().then((response) => {
          this.etList=response;
        }).catch(() => {
          this.$message.error("获取数据失败");
        });
    },
    getCiList(){
      selectCiList().then((response) => {
          this.ciList=response;
        }).catch(() => {
          this.$message.error("获取数据失败");
        });
    },
      getPcount(){
        listPcount().then((response) => {
          this.planCounts=response;
        }).catch(() => {
          this.$message.error("获取数据失败");
        });
    },
    getSbList(id){
        if(id==1){this.formDataOn.checkStatus="已完成"; }
        else if(id==2){this.formDataOn.checkStatus='未完成';
        }else if(id==3){ this.formDataOn.checkStatus='已过期';
        }
        this.formDataOn.pageNum=this.pageNum;
        this.formDataOn.pageSize=this.pageSize;
          listStatic(this.formDataOn).then((response) => {
            this.tableData=response.rows;
            console.log(this.tableData)
            this.totalOn=response.total;
          }).catch(() => {
            this.$message.error("获取数据失败");
          });
    },
    getList(){
        this.getSbList();
    },
  },
};
</script>

<style scoped>
.container {
  font-family: Arial, sans-serif;
  padding: 20px;
}

.tabs button {
  margin-right: 10px;
  padding: 10px 20px;
  border: none;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}
.tabs button.active {
  background-color: #0056b3;
  font-weight: bold;
}

.filter-section {
  margin: 20px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

input,
select {
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  background-color: #007bff;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

.note {
  font-size: 14px;
  color: #666;
}

.blue-number {
  color: #007bff;
  font-weight: bold;
  cursor: pointer;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

table, th, td {
  border: 1px solid #ddd;
  text-align: center;
}

th {
  background-color: #007bff;
  color: white;
}

td {
  padding: 10px;
  font-size: 14px;
}

.app-container {
  padding: 20px;
  background-color: #f8f9fa;
  font-family: Arial, sans-serif;
}

.summary-cards {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.card {
  flex: 1;
  padding: 20px;
  margin: 0 10px;
  text-align: center;
  border-radius: 6px;
  color: #fff;
  font-size: 16px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}
.card p {
  margin: 0;
  margin-bottom: 10px;
}
.card h2 {
  margin: 0;
  font-size: 24px;
  font-weight: bold;
}
.planned-count {
  background-color: #63c289;
}
.overdue-30-days {
  background-color: #87cefa;
}
.in-progress-count {
  background-color: #f08080;
}

.filter-section {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.input {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-right: 10px;
  flex: 1;
}

.status-select {
  width: 120px;
  margin-right: 10px;
}

.btn-search {
  padding: 8px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-search:hover {
  background-color: #0056b3;
}

.el-table {
  margin-bottom: 10px;
}

.btn-action {
  padding: 6px 12px;
  color: #007bff;
  background: none;
  border: none;
  cursor: pointer;
}

.btn-action:hover {
  text-decoration: underline;
}

.no-data {
  text-align: center;
  color: #999;
  margin: 20px 0;
}
.details-container {  
  font-size: 14px;  
  color: #333;  
}  

.details-container h3 {  
  font-size: 16px;  
  margin-top: 10px;  
  color: #409eff;  
}  

.details-container p {  
  line-height: 1.8;  
}  

.details-container span {  
  color: #606266;  
  font-weight: bold;  
}  
/* 弹窗样式 */  
.details-container {  
  font-size: 14px;  
  color: #333;  
}  
.details-section {  
  margin-bottom: 16px;  
}  

.details-section h4 {  
  font-size: 16px;  
  margin-bottom: 8px;  
  color: #409eff;  
}  
.row {  
  display: flex;  
  justify-content: space-between;  
  margin-bottom: 8px;  
}  

.item {  
  flex: 1;  
  margin-right: 16px;  
  font-size: 14px;  
  line-height: 1.6;  
}  
</style>
